<template>
	<div class="u-page" style="background-color: #fff;color: #e61111;">
		
		<div>
			<section>
				<div>
					<div id="imgbox">
						<div class="n-imgbox">
							<div>
								<u-swiper :list="PictureList" height="700" border-radius="0"></u-swiper>
							</div>
						</div>
					</div>

					<div class="n-price">
						<div class="n-price__left">
							<span class="curprice"><span class="curnum">¥{{product.discountPrice}}</span></span>
							<span class="mrkprice">¥{{product.goodsPrice}}</span>
						</div>
					</div>

					<div id="J_wb_rebate" style="margin: 10px 10px 0px;"></div>

					<div class="n-prdinfo">
						<h4 class="tit f-els-2">{{product.goodsName}}</h4>
						<div class="taginfo">
						  <u-tag
							  v-for="(item, index) in product.goodsTag.split(',')"
							  :key="index"
							  :text="item"
							  type="primary"
							  mode="dark"
						  ></u-tag>
						</div>
					</div>
					
					<div id="combobox"></div>
					
				</div>
			</section>
			
			<p class="v-sperate"></p>
			
			<section class="j-block bg-white">
				<div id="qualityreport"><!--Regular if72--></div>
				<div class="n-goodsdetailbar" id="details">
					<p class="txt">图文详情</p>
					<img class="v-img" src="https://dev.openea.net/linkey/bpm/appfile/Review/8cdd326d-c127-4f53-8183-85fac74233de.jpg">
				</div>
				<div class="u-pb-40">
					<u-parse class="rich-text" :html="this.escape2Html(product.detail)"></u-parse>
				</div>
			</section>
			
		</div>
		
		<div style="height: 30px;"></div>
		
		<article class="m-buybar">
			<div class="btn-wrap">
				<div @click="contactCustomerService" class="collect u-pl-10" style="display: flex;flex-direction: column;justify-content: center;text-align: center;">
					<div style="margin: 0 auto;">
						<u-icon name="chat" color="#9d9d9d" size="40"></u-icon>
					</div>
					<span>客服</span>
				</div>
				
				<div class="cart u-pr-5">
					<ShareBtn :docUnid="shareData.docUnid" :url="shareData.url" :route="shareData.route" :style="shareData.style"></ShareBtn>
				</div>
				<a href="#" class="buynow btn" @click="Evaluation">采购评测</a>
				<!-- <a href="#" class="view-pro btn" @click="Distribution">分销引导</a> -->
				<!-- <a href="#" class="view-pro btn" @click="GroupPurchase">发起接龙</a> -->
			</div>
		</article>
		
		<!-- 模态框 -->
		<div>
		  <u-modal v-model="CustomerService_Show" confirm-text="关闭" title="客服微信">
		    <view class="slot-content">
			  <rich-text :nodes="this.escape2Html(CustomerService.topPrompt)"></rich-text>
			  <div class="u-center u-pt-5 u-pb-5">
				  <u-image width="300rpx" height="300rpx" :src="CustomerService.csQrCode" @longpress="saveImg"></u-image>
			  </div>
			  <rich-text :nodes="this.escape2Html(CustomerService.bottomPrompt)"></rich-text>
		    </view>
		  </u-modal>
		</div>
	</div>
</template>

<script>
	import shareMixins from '@/mixins/share';
	export default {
		mixins: [shareMixins],
		data() {
			return {
				product: {}, // 商品信息
				CustomerService_Show: false,
				CustomerService: {},
				PictureList: [],
				shareData: {
				  docUnid: '',
				  url: '',
				  route: '',
				  style: 3,
				  imageUrl: ''
				},
			}
		},
		
		onLoad(options) {
			
			if(this.isNotNull(options.goodsNo)){
				this.getCommodityDetails(options.goodsNo)
			} else {
				this.showMSG('error','数据有误')
				setTimeout(() => {
					this.goBack()
				}, 1500)
			}
			
		},
		
		methods: {
			
			/**
			 * 获取商品详情
			 */
			async getCommodityDetails(goodsNo) {
				console.log("获取商品详情goodsNo=", goodsNo)
				let result = await this.$u.api.unifyMiniRestGet({
					systemid: "meily",
					url: "/goods/get/" + goodsNo,
				});
				if(result.code == 200){
					
					// 商品信息
					this.product = result.data;
					
					// 商品图
					if(this.isNotNull(this.product.goodsImages)){
						this.PictureList = this.product.goodsImages.split(",");
					}
					
					// 分享组件数据初始化
					this.shareData.docUnid = this.product.goodsNo
					this.shareData.url = '/pages_private_scene2/SceneModule/ProductDetails?goodsNo=' + this.product.goodsNo + '&SceneAssetsId=' + this.SceneAssetsId,
					this.shareData.route = this.getCurrentPageUrl(this);
					this.shareData.imageUrl = this.product.goodsImages.split(',')[0];
					
					// 获取客服信息
					this.getCSInfo(this.product.csId);
				}
			},
			
			/**
			 * 获取客服详情
			 */
			async getCSInfo(csId) {
				let result = await this.$u.api.unifyMiniRestGet({
					systemid: "meily",
					url: "/clientele/get/" + csId,
				});
				if(result.code == 200){
					this.CustomerService = result.data;
				}
			},
			
			/**
			 * 采购测评
			 */
			Evaluation(){
				/* let product = JSON.stringify(this.Commodity)
				uni.navigateTo({
					url:"/pages_private_scene2/ProductPromote/PlaceOrder?product="+encodeURIComponent(product)
				}); */
				
				let _good = {};
				
				_good.CommodityNo = this.product.goodsNo;
				_good.CommodityName = this.product.goodsName;
				_good.CommodityDetail = this.product.detail;
				_good.CommodityPicture = this.product.goodsImages;
				_good.CommodityPrice = this.product.discountPrice;// 玫丽专享价
				_good.Price = this.product.goodsPrice;// 市场价
				_good.Industry = "营销宣传";// 如果行业字段为空，则设置默认值
				_good.KeyWord = this.product.goodsTag;
				_good.EnableDistribution = "0";// 开启分销功能。0:否；1:是
				_good.CouponAmount = "";// 优惠券金额
				_good.SceneAssetsId = this.product.sceneAssetsId;
				_good.SceneID = this.product.sceneId;
				_good.CSID = this.product.csId;// 商品客服
				_good.ForemanReward = this.product.foremanReward;// 线上服务商分销报酬
				_good.MerchantName = this.product.sceneAssetsName;// 定制名称
				_good.MerchantIcon = this.product.sceneAssetsId;// 定制ID
				
				let product = JSON.stringify(_good)
				uni.navigateTo({
					url:"/pages_private_scene2/ProductPromote/PlaceOrder?product="+encodeURIComponent(product)
				});
				
			},
			
			/**
			 * 分销引导
			 */
			Distribution(){
				console.log("分销引导");
				uni.navigateTo({
					url:'/pages_private_scene2/GroupPurchase/DistributionGoods?goodsNo=' + this.product.goodsNo
				})
			},
			
			/**
			 * 发起接龙
			 */
			GroupPurchase(){
				uni.navigateTo({
					url:"/pages_private_scene2/GroupPurchase/CreateSolitaire?SceneID="+ this.SceneID+"&SceneAssetsId="+this.SceneAssetsId+"&CommodityNo="+this.product.goodsNo+"&NoSelect=1"
				})
			},
			
			/**
			 * 点击联系客服
			 */
			contactCustomerService() {
				if (this.isNotNull(this.CustomerService.csQrCode)) {
					this.CustomerService_Show = true
				} else {
					this.showMSG('none', '请联系平台管理员')
				}
			},
			
		}
	}
</script>

<style scoped>
	.m-sticknav {
		width: 100%;
		height: 46px;
		border-bottom: 1px solid #ddd;
	}

	.m-sticknav .navbar {
		position: relative;
		height: 45px;
		width: 100%;
		background: #fff;
	}

	.m-sticknav .navbar .tabbox {
		margin: 0 50px;
		height: 100%;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
	}

	.m-sticknav .navbar .tabbox .itm {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		text-align: center;
		height: 45px;
		line-height: 45px;
		font-size: 14px;
		color: #666;
	}

	.m-sticknav .navbar .tabbox .cur {
		position: relative;
		color: #333;
	}

	.m-sticknav .navbar .tabbox .cur:after {
		position: absolute;
		content: "";
		width: 28px;
		height: 1px;
		background: #e31436;
		left: 50%;
		margin-left: -14px;
		bottom: 12px;
	}

	.m-sticknav .navbar .v-returnicon {
		position: absolute;
		left: 0px;
		top: 0px;
		height: 45px;
		width: 45px;
		background-size: 200px;
	}

	.m-sticknav .navbar .v-homeicon {
		position: absolute;
		right: 0px;
		top: 0px;
		height: 45px;
		width: 45px;
		background-size: 200px;
	}
	
	/*  购物车  */
	.n-imgbox {
		position: relative;
		width: 100%;
	}

	.n-imgbox .n-slideimg {
		position: relative;
		z-index: 0;
		width: 100%;
		padding-top: 80%;
		height: auto;
		overflow: hidden;
		background: none;
	}

	.n-imgbox .n-slideimg .imglist {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		white-space: nowrap;
		line-height: 0px;
		font-size: 0px;
		-webkit-backface-visibility: hidden;
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
		transition-duration: 0ms;
		-webkit-transition-duration: 0ms;
	}

	.n-imgbox .n-slideimg .imglist .itm {
		display: inline-block;
		width: 100%;
	}

	.n-imgbox .n-slideimg .imglist .v-img {
		width: 80%;
		margin: 0 10%;
		background-size: 62px;
	}

	.n-imgbox .n-slideimg .imgpagebox {
		position: absolute;
		white-space: nowrap;
		bottom: 16px;
		width: 100%;
		padding: 0 20px;
		line-height: 0;
		text-align: center;
		font-size: 0;
	}

	.n-imgbox .n-slideimg .imgpagebox .dot {
		display: inline-block;
		vertical-align: middle;
		width: 6px;
		height: 6px;
		margin-right: 9px;
		border-radius: 20px;
		background-color: #000;
	}

	.n-imgbox .n-slideimg .imgpagebox .dot.active {
		width: 8px;
		height: 8px;
		border: 1px solid #000;
		background-color: #fff;
	}

	.n-imgbox .tagbox {
		position: absolute;
		right: 15px;
		bottom: 15px;
		width: 4rem;
		height: 4rem;
	}

	.n-imgbox .tagbox .v-tagimg {
		display: block;
		width: 100%;
		height: 100%;
	}
	
	.n-colorimg {
		height: 4rem;
		overflow: hidden;
	}

	.n-colorimg .colorimgwrap {
		position: relative;
		height: 4rem;
		white-space: nowrap;
		vertical-align: top;
		overflow: auto;
		background: #f4f4f4;
		font-size: 0px;
		-webkit-overflow-scrolling: touch;
	}

	.n-colorimg .colorimgwrap .imgbox {
		position: relative;
		display: inline-block;
		vertical-align: top;
		margin: 0.5rem 0.8rem 0 0;
	}

	.n-colorimg .colorimgwrap .imgbox-1 {
		margin: 0.5rem 1.5rem 0 0.7rem;
	}

	.n-colorimg .colorimgwrap .imgbox .v-mainimg {
		vertical-align: top;
	}

	.n-colorimg .colorimgwrap .imgbox img {
		display: inline-block;
		width: 3rem;
		height: 3rem;
	}

	.n-colorimg .colorimgwrap .imgbox.active:after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		border: 1px solid #666;
		width: 100%;
		height: 100%;
	}

	.n-colorimg .colorimgwrap .txt {
		display: inline-block;
		height: 3rem;
		line-height: 3rem;
		font-size: 12px;
		color: #666;
	}

	.n-colorimg .colorimgwrap .colorimg {
		display: inline-block;
		vertical-align: top;
		margin-left: 2px;
	}

	.n-colorimg .colorimgwrap .colorimg .itm {
		display: inline-block;
	}
	
	.n-price {
		padding-left: 10px;
		height: 50px;
		/* line-height: 50px; */
		width: 100%;
		/* font-size: 0px; */
		color: #000000;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
	}

	.n-price__left {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		line-height: 110rpx;
	}

	.n-price__right {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		font-size: 12px;
		margin-right: 10px;
		font-weight: bold;
		margin-top: 10px;
	}

	.n-price .curprice {
		font-size: 15px;
		color: #e31436;
	}

	.n-price .curprice .curnum {
		font-size: 18px;
		font-weight: bold;
	}

	.n-price .mrkprice {
		text-decoration: line-through;
		margin-left: 8px;
		font-size: 13px;
		color: #999;
	}

	.n-price .tag {
		display: inline-block;
		padding: 0 5px;
		height: 15px;
		line-height: 15px;
		text-align: center;
		margin-left: 10px;
		vertical-align: 2px;
		font-size: 11px;
		color: #fff;
		background: #ff8587;
		border-radius: 3px;
	}

	.n-price .apptxt {
		float: right;
		padding: 3px 10px 0 0;
		font-size: 12px;
		color: #e31436;
	}

	.n-price .u-rtarr-1 {
		border-color: #e31436 #e31436 transparent transparent;
	}

	.n-price .f-fwb {
		font-weight: bold;
	}
	
	.n-prdinfo {
		margin: 0 10px 10px;
		border-top: 1px solid #fff;
	}

	.n-prdinfo .presaletag {
		display: inline-block;
		height: 17px;
		line-height: 17px;
		padding: 0 6px;
		margin-right: 2px;
		background: #96c9ec;
		color: #fff;
		border-radius: 2px;
		font-size: 13px;
		font-weight: normal;
	}

	.n-prdinfo .supermarkettag {
		display: inline-block;
		height: 17px;
		line-height: 15px;
		padding: 0 6px;
		margin-right: 2px;
		color: #e31436;
		font-size: 12px;
		font-weight: normal;
		border: 1px solid #e31436;
		-webkit-transform: translateY(-1px);
		transform: translateY(-1px);
	}

	.n-prdinfo .supermarkettag.z-mr {
		margin-right: 5px;
	}

	.n-prdinfo .tit {
		line-height: 18px;
		/* padding-top: 10px; */
		margin-bottom: 6px;
		width: 100%;
		font-size: 14px;
		color: #333;
		font-weight: bold;
	}

	.n-prdinfo .subtit {
		font-size: 13px;
		color: #333;
		line-height: 21px;
	}

	.n-prdinfo .subtit .spec {
		color: #e31436;
	}

	.n-prdinfo .presaletxt {
		color: #f00;
	}

	.n-prdinfo .taginfo {
		padding: 9px 0 5px 10px;
		margin-top: 10px;
		background: #fff;
		zoom:1;}

	.n-prdinfo .taginfo:after {
		display: block;
		clear: both;
		visibility: hidden;
		height: 0;
		overflow: hidden;
		content: ".";
	}

	.n-prdinfo .taginfo .v-flagimg {
		float: left;
		display: block;
		width: 16px;
		height: 16px;
		margin-right: 6px;
	}

	.n-prdinfo .taginfo .tagtxt {
		float: left;
		margin-right: 10px;
		font-size: 12px;
		color: #666;
	}
	
	.u-graybar {
		background: #f1f1f1;
		height: 10px;
	}
	
	.n-activitybox {
		margin: 0 20rpx;
		padding: 10rpx 20rpx;
		background-color: #FFFFFF;
	}

	.n-activitybox .itm {
		position: relative;
		padding: 9px 0;
		/* border-bottom: 1px solid #f0f0f0; */
		zoom:1;}

	.n-activitybox .itm:after {
		display: block;
		clear: both;
		visibility: hidden;
		height: 0;
		overflow: hidden;
		content: ".";
	}

	.n-activitybox .itm .name {
		float: left;
		height: 24px;
		line-height: 24px;
		font-size: 13px;
		color: #a9a6a6;
	}

	.n-activitybox .itm .cnt {
		margin-left: 50px;
		padding-top: 1px;
		padding-right: 10px;
	}

	.n-activitybox .itm:last-child {
		border-bottom: none;
	}

	.n-activitybox .v-linkicon {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0px;
		width: 10px;
		height: 10px;
		margin-top: auto;
		margin-bottom: auto;
		background-size: 200px;
	}
	
	.n-coupon .couponinfo {
		height: 25px;
		line-height: 24px;
		margin-top: -1px;
		/* overflow: hidden; */
		font-size: 0px;
	}

	.n-coupon .coupontxt {
		display: inline-block;
		height: 24px;
		line-height: 24px;
		padding: 0 6px;
		margin-right: 10px;
		border: 1px dotted #ff8587;
		color: #ff8785;
		font-size: 12px;
	}

	.n-coupon .txtinfo {
		color: #333;
		font-size: 12px;
		padding-right: 10px;
	}

	.n-coupon .v-link {
		display: block;
	}
	
	.n-skubody .cntbox {
		max-height: 15rem;
		overflow: hidden;
		margin: 10px 10px 0;
		zoom:1
	}

	.n-skubody .cntbox:after,.n-skubody .cntbox:before {
		display: table;
		content: "";
		line-height: 0
	}

	.n-skubody .cntbox:after {
		clear: both
	}

	.n-skubody .cntbox .propname {
		padding-left: 10px;
		height: 40px;
		line-height: 40px;
		font-size: 14px;
		color: #333
	}

	.n-skubody .cntbox .propbox {
		zoom:1}

	.n-skubody .cntbox .propbox:after,.n-skubody .cntbox .propbox:before {
		display: table;
		content: "";
		line-height: 0
	}

	.n-skubody .cntbox .propbox:after {
		clear: both
	}

	.n-skubody .cntbox .v-propbtn {
		float: left;
		height: 32px;
		line-height: 32px;
		display: inline-block;
		padding: 0 20px;
		margin: 0 10px 15px 0;
		border: 1px solid #bbb;
		border-radius: 3px
	}

	.n-skubody .cntbox .v-propbtn-1 {
		background: #ff8587;
		border-color: #ff8587;
		color: #fff
	}

	.n-skubody .cntbox .v-propbtn-2 {
		border-color: #ff8587;
		color: #ff8587;
		border-style: dashed
	}

	.n-skubody .cntbox .v-propbtn-3 {
		border-color: #bbb;
		color: #666;
		border-style: dashed
	}

	.n-skubody .cntbox .itm {
		border-bottom: 1px solid #ddd
	}

	.n-skubody .cntbox .itm:last-child {
		border-bottom: none
	}
	
	.n-brandbox {
		background: #fff;
	}

	.n-brandbox .tit {
		height: 45px;
		line-height: 45px;
		padding: 0 10px;
		font-size: 14px;
		color: #333;
	}

	.n-brandbox .brandwrap {
		position: relative;
		display: block;
		padding: 0 10px;
		height: 50px;
		margin: 0 0 10px 0;
	}

	.n-brandbox .brandwrap .v-brandimg {
		display: block;
		width: 50px;
		height: 50px;
		float: left;
		margin-right: 10px;
		border: 1px solid #f1f1f1;
	}

	.n-brandbox .brandwrap .name {
		padding-top: 4px;
		width: 50%;
		font-size: 13px;
		color: #333;
	}

	.n-brandbox .brandwrap .txt {
		padding-top: 3px;
		font-size: 13px;
		color: #666;
	}

	.n-brandbox .brandwrap .num {
		color: #e31436;
	}

	.n-brandbox .brandwrap .v-btn {
		position: absolute;
		right: 10px;
		top: 11px;
		padding-left: 40rpx;
		height: 28px;
		line-height: 28px;
		width: 90px;
		border: 1px solid #ddd;
		color: #333;
		font-size: 12px;
		border-radius: 4px;
	}

	.n-brandbox .brandwrap .v-btn:after {
		content: "";
		position: absolute;
		top: 7px;
		left: 10px;
		width: 15px;
		height: 15px;
		background-size: 200px;
	}

	.n-brandbox .listwrap {
		margin: 0 0 10px 10px;
		overflow: hidden;
		/* height: 4.973333rem; */
		height: 14rem;
	}

	.n-brandbox .prdlist {
		width: auto;
		white-space: nowrap;
		overflow: auto;
		/* height: 5.333333rem; */
		height: 11rem;
		font-size: 0;
		-webkit-overflow-scrolling: touch;
	}

	.n-brandbox .prdlist .itm {
		display: inline-block;
		/* width: 3.333333rem; */
		width: 7rem;
		/* margin-right: 0.266667rem; */
		margin-right: 0.5rem;
		vertical-align: top;
	}

	.n-brandbox .prdlist .itm .v-link {
		display: block;
	}

	.n-brandbox .prdlist .itm .v-img {
		display: block;
		/* width: 3.333333rem; */
		/* height: 3.333333rem; */
		width: 7rem;
		height: 7rem;
		background-size: 62px;
	}

	.n-brandbox .prdlist .itm .subtit {
		text-align: center;
		line-height: 1rem;
		height: 2rem;
		word-break: break-word;
		white-space: normal;
		margin: 6px 0 4px;
		font-size: 12px;
		color: #333;
	}

	.n-brandbox .prdlist .itm .priceinfo {
		text-align: center;
		height: 0.8rem;
		line-height: 0.8rem;
		margin-top: 6px;
		font-size: 12px;
	}

	.n-brandbox .prdlist .itm .priceinfo .curprice {
		font-size: 13px;
		color: #e73c3c;
	}

	.n-brandbox .prdlist .itm .priceinfo .mrkprice {
		text-decoration: line-through;
		font-size: 10px;
		color: #999;
	}

	.n-brandbox .prdlist .seemore {
		position: relative;
		display: inline-block;
		width: 7rem;
		min-height: 7rem;
		border: 1px solid #ccc;
	}

	.n-brandbox .prdlist .seemore .txtwrap {
		text-align: center;
	}

	.n-brandbox .prdlist .seemore .txtwrap .alltxt {
		display: inline-block;
		padding: 0 2px;
		height: 20px;
		line-height: 20px;
		border-bottom: 1px solid #ccc;
		font-size: 13px;
		color: #eb1511;
	}

	.n-brandbox .prdlist .seemore .moretxt {
		text-align: center;
		font-size: 12px;
		color: #666;
	}

	.n-brandbox .prdlist .seemore .cntbox {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 100%;
		-webkit-transform: translate(-50%,-50%);
		-moz-transform: translate(-50%,-50%);
		-ms-transform: translate(-50%,-50%);
		-o-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
	}
	
	.n-description .txt {
		/* float: left; */
		position: relative;
		margin: 0 50rpx;
		line-height: 22px;
		font-size: 12px;
	}

	.n-description .txt:after {
		position: absolute;
		content: "";
		top: 8px;
		left: -10px;
		width: 6px;
		height: 6px;
		font-size: 20px;
		background: #ff8587;
		border-radius: 50%;
	}
	
	.n-distribution .addr {
		position: relative;
		line-height: 18px;
		margin-top: 2px;
		font-size: 12px;
		color: #333;
	}
	
	.n-distribution .tips {
		margin-top: 6px;
		padding-bottom: 1px;
		font-size: 12px;
		color: #666;
		line-height: 21px;
	}
	
	.n-commentbox {
		background: #fff;
	}

	.n-commentbox .tit {
		position: relative;
		height: 50px;
		line-height: 50px;
		padding: 0 10px;
		font-size: 14px;
		color: #333;
	}
	
	.f-els-2 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	
	.n-recommendbox .recommendlist .itm .priceinfo {
		text-align: center;
		height: 0.7rem;
		line-height: 0.7rem;
		margin-top: 6px;
		font-size: 12px;
	}
	
	.mrkprice{
		padding-left: 8rpx;
	}
	
	.v-sperate {
		height: 10px;
		background: #f1f1f1;
	}
	
	.n-goodsdetailbar {
		position: relative;
		height: 44px;
	}

	.n-goodsdetailbar .txt {
		position: absolute;
		top: 0;
		left: 0px;
		z-index: 9;
		width: 100%;
		height: 44px;
		line-height: 44px;
		text-align: center;
		font-size: 14px;
		font-weight: bold;
	}

	.n-goodsdetailbar .v-img {
		display: block;
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 90rpx;
	}
	
	img {
		vertical-align: middle;
		border: 0;
	}
	
	.m-buybar {
		position: fixed;
		z-index: 999;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 50px;
		background: #fff;
	}

	.m-buybar .btn-wrap {
		height: 100%;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
	}

	.m-buybar a {
		display: block;
		height: 50px;
		vertical-align: top;
		font-size: 15px;
		line-height: 50px;
		text-align: center;
	}

	.m-buybar .btn {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
	}

	.m-buybar .buynow {
		color: #fff;
		background: #e31436;
	}

	.m-buybar .buynow.btn-large {
		border: none;
		background-color: #d22147;
		color: #fff;
	}

	.m-buybar .buynow.dis {
		color: #fff;
		background-color: #ccc;
		border: none;
		cursor: default;
	}

	.m-buybar .buynow.s-fc {
		background: #000;
	}

	.m-buybar .addcart {
		background-color: #ff8587;
		color: #fff;
	}

	.m-buybar .addcart.dis {
		color: #fff;
		background-color: #ccc;
		border: none;
		cursor: default;
	}

	.m-buybar .collect {
		position: relative;
		/* width: 95px; */
		width: 55px;
		/* padding-top: 12px; */
		/* border-top: 1px solid #ddd; */
		/* border-right: 1px solid #ddd; */
		color: #666;
		font-size: 12px;
	}

	.m-buybar .collect:after {
		content: "";
		position: absolute;
		width: 20px;
		height: 20px;
		top: 7px;
		left: 17px;
		background-size: 200px;
	}

	.m-buybar .collect-1 {
		background-position: -161px 1px;
	}

	.m-buybar .collect-1:after {
		background-position: -139px -33px;
	}

	.m-buybar .cart {
		position: relative;
		width: 55px;
		/* padding-top: 12px; */
		/* border-top: 1px solid #ddd; */
		color: #666;
		font-size: 12px;
		background-size: 200px;
	}

	.m-buybar .cart .count {
		position: absolute;
		min-width: 16px;
		height: 16px;
		left: 27px;
		top: 2px;
		background-color: #fff;
		color: #e31436;
		-webkit-border-radius: 8px;
		border-radius: 8px;
		font-size: 12px;
		line-height: 14px;
		text-align: center;
		padding: 0 4px;
		border: 1px solid #e31436;
	}

	.m-buybar .nogoods {
		position: absolute;
		top: -40px;
		left: 0;
		width: 100%;
		padding-left: 10px;
		background-color: rgba(0,0,0,0.7);
		text-align: left;
		font-size: 16px;
		line-height: 40px;
		color: #fff;
	}

	.m-buybar .nogoods:after {
		content: "";
		position: absolute;
		width: 70px;
		height: 45px;
		left: 10px;
		top: -35px;
		background-size: 200px;
	}

	.m-buybar .cantdeliver {
		position: absolute;
		text-align: center;
		top: -40px;
		left: 0;
		width: 100%;
		background-color: rgba(0,0,0,0.8);
		font-size: 12px;
		line-height: 40px;
		color: #fff;
	}

	.m-buybar .hide {
		display: none;
	}
	
	.customStyle{
	  border: none !important;
	  background-color:transparent;
	  padding-left: 0rpx !important;
	  padding-right: 0rpx !important;
	}
	
	.customStyle::after {
	  border: none;
	}
	
	.bg-white{
		background-color: #FFFFFF;
	}
	
	.itm-value{
		font-weight: 500;
	}
	
	.slot-content {
		font-size: 28rpx;
		color: #bcbcbc;
		text-align: center;
		margin: 0 auto;
	}
	
	.recommend-title{
		display: flex;
		justify-content: space-between;
		line-height: 90rpx;
	}
	
	.box-R{
		display: flex;
		color: #c5c1c1;
		padding-right: 20rpx;
	}
	
	.view-pro{
		color: #fff;
		background: #3b79fe;
	}
	
	.rich-text {
		margin-left: 10px;
		margin-right: 10px;
	}
	
</style>
